<template>
<div class="nine" ref="nine">
    <div class="title">
        服务行业
    </div>
    <div class="container"
        @mouseenter="hover=true"
        @mouseleave="hover=false">
        <div 
            class="item_list"
            v-for="item in 2" :key="item"
            :style="{
                transform:'translate(-'+translate_left+'px, 0px)',
            }">
            <div class="item">
                <img src="@/assets/photo/nine1.png" alt="">
                <div class="title">
                    建筑检测
                </div>
            </div>
            <div class="item">
                <img src="@/assets/photo/nine2.png" alt="">
                <div class="title">
                    生物检测
                </div>
            </div>
            <div class="item">
                <img src="@/assets/photo/nine3.png" alt="">
                <div class="title">
                    石油检测
                </div>
            </div>
            <div class="item">
                <img src="@/assets/photo/nine4.png" alt="">
                <div class="title">
                    食品检测
                </div>
            </div>
            <div class="item">
                <img src="@/assets/photo/nine5.png" alt="">
                <div class="title">
                    机械检测
                </div>
            </div>
            <div class="item">
                <img src="@/assets/photo/nine6.png" alt="">
                <div class="title">
                    药品检测
                </div>
            </div>
            <div class="item">
                <img src="@/assets/photo/nine7.png" alt="">
                <div class="title">
                    汽车检测
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {start_to_end} from '@/assets/tools/public_tools';
export default {
    name: 'Nine',
    props:{
        back_top:{
            type:Boolean,
            default:false,
        },
    },
    watch:{
        back_top(){
            if(this.back_top){
                this.on_back_top();
            }
        },
    },
    data(){
        return{
            translate_left:0,
            hover:false,
        };
    },
    created(){
        setInterval(()=>{
            if(!this.hover){
                if(this.translate_left>=1260){
                    this.translate_left = 0;
                }
                this.translate_left = this.translate_left+1;
            }
        },10);
    },
    methods:{
        on_back_top(){
            let _top = document.documentElement.scrollTop + this.$refs.nine.getBoundingClientRect().top - 85;
            start_to_end(document.documentElement.scrollTop,_top-10,300);
        },
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.nine{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items:center;
    >.title{
        text-align: center;
        margin-bottom: 60px;
        font-size: 32px;
        font-weight: 600;
        line-height: 100%;
    }
    >.container{
        max-width: 1100px;
        width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        >.item_list{
            width: fit-content;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            >.item{
                margin: 0 15px;
                img{
                    width: 150px;
                    height: 150px;
                    border-radius: 3px;
                }
                >.title{
                    font-size: 18px;
                    margin-top: 10px;
                }
            }
        }
    }
}
</style>
